<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px;font-weight: bold;">设备信息</span>

            <div style="float: right; padding: 0;">
              <el-alert style="padding: 6px 12px;" v-if="terminalsXbViewData.description === null"
                        title="正常"
                        type="success"
                        :closable="false"
                        show-icon>
              </el-alert>
              <el-alert style="padding: 6px 12px;"
                        :title="terminalsXbViewData.description"
                        type="error" v-else
                        :closable="false"
                        show-icon>
              </el-alert>
            </div>
          </div>
          <div style="width: 600px;height: 442px;margin-bottom: 16px;">
            <image-preview v-if="terminalsXbViewData.sampleTableImage" style="width: calc(100% - 30px);height: 100%;"
                           :src="terminalsXbViewData.sampleTableImage"></image-preview>
            <img v-else src="https://cbu01.alicdn.com/img/ibank/2015/777/066/2149660777_1899426032.jpg"
                 style="width: 100%;height: 100%;" alt=""/>
          </div>

          <el-descriptions title="" border :column="2">
            <el-descriptions-item label="设备编号">
              {{ terminalsXbViewData.terminalId }}
            </el-descriptions-item>
            <el-descriptions-item label="所属区域">
              {{ terminalsXbViewData.sheetsName }}
            </el-descriptions-item>
            <el-descriptions-item label="用户编号">
              {{ terminalsXbViewData.userId }}
            </el-descriptions-item>
            <el-descriptions-item label="用户名称">
              {{ terminalsXbViewData.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="安装地址">
              {{ terminalsXbViewData.installAddress }}
            </el-descriptions-item>
            <el-descriptions-item label="用户通讯地址">
              {{ terminalsXbViewData.userAddress }}
            </el-descriptions-item>
            <el-descriptions-item label="当前读数(m³)">
              <span style="color: #1ab394;font-size: 28px;font-weight: bold;">{{ terminalsXbViewData.totalFlow }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="电池电压(V)">
              <span style="color: #1ab394;font-size: 28px;font-weight: bold;">{{
                  terminalsXbViewData.meteredVoltage
                }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="信号强度">
              <span style="color: #1ab394;font-size: 28px;font-weight: bold;">{{
                  terminalsXbViewData.terminalCsq
                }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="阀门状态">
              <span v-if="terminalsXbViewData.valveState===null"
                    style="color: #de3434;font-size: 28px;font-weight: bold;">
                -
              </span>
              <span v-else-if="terminalsXbViewData.valveState === 1"
                    style="color: #1ab394;font-size: 28px;font-weight: bold;">
               开
              </span>
              <span v-else style="color: #de3434;font-size: 28px;font-weight: bold;">
                关
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="抄表时间">{{ terminalsXbViewData.readDate }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 20px;font-weight: bold;">近30天日用量曲线</span>

            <div style="float: right; padding: 3px 0">
              <el-date-picker v-model="timevalue" type="daterange" range-separator="至"
                              start-placeholder="开始日期" size="mini"
                              end-placeholder="结束日期" style="width: 210px;"
                              value-format="yyyy-MM-dd" :clearable="false" @change="handleTimeValueChange">
              </el-date-picker>
            </div>
          </div>

          <div>
            <div id="main" ref="main" :style="getChartBoxStyle"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getTerminalsXbViewData} from '@/api/dataquery/metered/terminalsXbView'
import {listThirtyDaysFlow} from "@/api/dataquery/metered/terminalsfreezexb";
import * as echarts from "echarts";
import moment from "moment/moment";

export default {
  name: "RealTime",
  data() {
    return {
      screenHeight: null,
      currentTerminalId: null,
      currentLocationNb: null,
      terminalsXbViewData: {},
      myChart: undefined,
      timevalue: [moment().subtract(30, 'day').format('YYYY-MM-DD'), moment().subtract(1, 'day').format('YYYY-MM-DD')],
      // 折线图继承
      chartExtend: {
        // 标题
        title: {
          text: ''
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [], // x轴坐标名称
        },
        // y轴
        yAxis: {
          //2022/10 /chuan 原：流量
          name: '日用量(m³)',
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            formatter: '{value} m³'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#6e7079'
            }
          },
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: ['日用量'],
          x: 'center',
          y: 'top',
          show: true,
          padding: 20
        },
        dataZoom: [{
          start: 0,
          end: 100,
          bottom: 10,
          type: 'slider',
          showDataShadow: false,
          handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%'
        }, {
          type: 'inside'
        }],
        // 指定图标的类型
        series: [],
      },
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getChartBoxStyle() {
      return {width: '100%', height: (this.screenHeight - 220) + 'px'}
    }
  },
  methods: {
    updateTerminalId(terminalId,locationNb) {
      this.currentTerminalId = terminalId
      this.currentLocationNb = locationNb
    },
    // 初始化echarts
    initEchart() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(this.$refs.main)
      // this.handleData()
      this.myChart.setOption(this.chartExtend, true)
      this.myChart.resize()
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    loadData() {
      this.loadTerminalXbViewData()
      this.getWaterConsumptionList()
    },
    loadTerminalXbViewData() {
      const query = {
        locationNb: this.currentLocationNb
      }
      getTerminalsXbViewData(query).then(res => {
        if (res.code === 200) {
          this.terminalsXbViewData = res.data
        }
      })
    },
    /** 查询用水量 */
    getWaterConsumptionList() {
      this.tableLoading = true;
      const query = {
        locationNb: this.currentLocationNb,
        startTime: this.timevalue[0],
        endTime: this.timevalue[1],
      }
      this.chartExtend.series = []
      listThirtyDaysFlow(query).then(response => {
        if (response.data) {
          const data = response.data
          let xAxisData = data.map(item => item.freezeTime)
          let seriesItem = {
            name: '日用量',
            type: 'bar',
            data: []
          }
          data.forEach(item => seriesItem.data.push(item.cumulativeFlow))
          this.chartExtend.xAxis.data = xAxisData
          this.chartExtend.series.push(seriesItem)
          this.myChart.setOption(this.chartExtend)
        }
        this.tableLoading = false;
      });
    },
    handleTimeValueChange(){
      this.getWaterConsumptionList()
    }
  },
  mounted() {
    this.initEchart()
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
  width: 110px;
  text-align: right;
  padding: 8px;
}

::v-deep .el-descriptions-item__cell.el-descriptions-item__content {
  min-width: 150px;
  padding: 8px;
}
</style>
